@import '../../../styles/modules/all';

app-settings {
  --color-settings-description-text: #{$color-text3-default};
  --color-settings-description-link: #{$color-text3-default};
  --color-settings-description-link-hover: #{$color-bg2-default};
  --color-settings-value-text: #{$color-text2-default};

  display: block;

  @include theme-dark {
    --color-settings-description-text: #{$color-text3-dark};
    --color-settings-description-link: #{$color-text3-dark};
    --color-settings-description-link-hover: #{$color-text1-dark};
    --color-settings-value-text: #{$color-text2-dark};
  }

  .header-panel,
  .panel-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .header-panel {
    flex: none;
  }

  .panel-container {
    overflow-y: auto;
  }

  .setting-group {
    label {
      display: block;
      margin-bottom: 0.25rem;
    }

    p {
      font-size: 0.95rem;
    }

    .description {
      color: var(--color-settings-description-text);

      a {
        border-bottom-color: var(--color-settings-description-link);
        color: var(--color-settings-description-link);

        @media (hover: hover) {
          &:active,
          &:focus,
          &:hover {
            border-bottom-color: var(--color-settings-description-link-hover);
            color: var(--color-settings-description-link-hover);
          }
        }
      }
    }

    .setting-value {
      background: transparent;
      border: 0;
      border-radius: 0;
      color: var(--color-settings-value-text);
      height: auto;
      padding: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: none;
      width: auto;
    }
  }

  .view-content {
    padding: 0.75rem 0 0;
  }

  .well {
    overflow: hidden;
    padding: 0;

    h4 {
      margin-bottom: 0;
      padding: 0.75rem 1rem;
    }

    .btn.btn-default {
      font-size: 1.1rem;
      line-height: 2.3rem;
    }

    .panel-content {
      padding: 0 1.25rem;
    }
  }
}
